<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible"
        content="ie=edge">
  <title>表单</title>
  <script src="../lib/angular.1.7.8.js"></script>
</head>

<body>
  <div ng-app="myApp"
       ng-controller="myCtrl">
    <h2> input绑定 </h2>
    <input type="text"
           name=""
           id=""
           ng-model="inputValue">
    <p>{{inputValue}}</p>
    <hr />
    <h2>select</h2>
    <select ng-model="selectItem">
      <option value=""></option>
      <option value="dog">dog</option>
      <option value="cat">cat</option>
      <option value="pig">pig</option>
    </select>
    <div ng-switch="selectItem">
      <div ng-switch-when="dog">
        <h1>Dogs</h1>
        <p>Welcome to a world of dogs.</p>
      </div>
      <div ng-switch-when="cat">
        <h1>Cats</h1>
        <p>Welcome to a world of cats.</p>
      </div>
      <div ng-switch-when="pig">
        <h1>Pigs</h1>
        <p>Welcome to a world of pigs.</p>
      </div>
    </div>
    <hr />
    <h2>CheckBox</h2>
    <input type="checkbox"
           ng-model="checkBoxState">
    <p ng-show="checkBoxState">显示</p>
    <hr />
    <h2>radio</h2>
    <from>
      <input type="radio"
             ng-model="radioValue"
             value="dog">
      <input type="radio"
             ng-model="radioValue"
             value="cat">
      <input type="radio"
             ng-model="radioValue"
             value="pig">
    </from>
    <p>选中了：{{radioValue}}</p>
    <hr />
    表单例子：
    <from novalidate>
      First Name: <br />
      <input type="text"
             ng-model="user.firstName"><br />
      Last Name: <br />
      <input type="text"
             ng-model="user.lastName"><br />
      <button type="button"
              ng-click="reset()">RESET</button>
      <p>form = {{user}}</p>
      <p>master = {{master}}</p>
      <input type="month" ng-model="selectMonth" ng-change="myFunc()" />
    </from>
    <hr/>
    <label>Type something:
      <input #customerInput>{{customerInput.value}}
    </label>
  </div>
  <script>
    var app = angular.module('myApp', [])
    app.controller('myCtrl', ($scope) => {
      $scope.master = { firstName: 'John', lastName: 'Ye' }
      $scope.reset = function () {
        $scope.user = angular.copy($scope.master)
      }
      $scope.myFunc = function() {
        console.log($scope.selectMonth)
      }
      $scope.reset()
    })
  </script>
</body>

</html>
